<template>
    <div class="container">
        <header>
            <div class="app-info-wrap">
                <div class="home-page-icon-wrap">
                    <i class="el-icon-back" @click="handleGotoHome"></i>
                </div>
                <div class="app-detail-wrap">
                    <div class="app-icon-and-name">
                        <div class="app-icon-wrap">

                        </div>
                        <div class="app-name">未命名应用</div>
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-edit">修改名称和图标</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-warning-outline">编辑应用说明</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-document-copy">复制应用</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-delete" style="color: red;">删除应用</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
            <div :class="workSheetGroupActive ? `empty-app-item-wrap active` : `empty-app-item-wrap`" v-if="workSheetGroupList.length === 0">
                <div class="empty-app-item">
                    <i class="el-icon-menu" @click="handleWorkSheetGroup"></i>
                </div>
                <div class="app-group-intro">
                    <div class="title">创建分组来管理工作表</div>
                    <div class="explain">当你的工作表数量变多时，你可以创建分组来分类管理工作表。分组将排列在顶部导航中，方便你在不同类型的工作表间快速切换</div>
                    <div class="intro-images">
                        <img src="../assets/images/appGroupIntro.gif" alt="应用分组介绍">
                    </div>
                    <div class="btn-wrap">
                        <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-plus"
                            @click="addWorkSheetGroup">添加分组</el-button> 
                    </div>
                </div>
            </div>
            <div class="app-items-outer-wrap" v-if="workSheetGroupList.length > 0">
                <div class="app-items-inner-wrap">
                    <ul class="app-items-wrap">
                        <template v-for="item in workSheetGroupList">
                        <li :class="item.workSheetGroupUuid === currentWorkSheetGroup.workSheetGroupUuid ? `work-sheet-group-active` : ``" :key="item.workSheetGroupUuid" @click="handleCurrentWorkSheetGroup(item)">
                            <div class="sortable-item">
                                <template v-if="item.workSheetGroupUuid !== currentWorkSheetGroup.workSheetGroupUuid">
                                    <span>{{item.workSheetGroupName}}</span>
                                </template>
                                <template v-else>
                                    <template v-if="currentWorkSheetGroup.isEdit">
                                        <el-input v-model="currentWorkSheetGroup.workSheetGroupName" placeholder="请输入内容"></el-input>
                                    </template>
                                    <template v-else>
                                        <span>{{item.workSheetGroupName}}</span>
                                    </template>
                                </template>
                            </div>
                            <el-dropdown trigger="click" @command="handleWorkSheetGroupCommand">
                                <span class="el-dropdown-link">
                                    <div class="icon"></div>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item icon="el-icon-edit" command="renameWorkSheetGroup">重命名</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-plus" command="addWorkSheetGroup">在此后添加分组</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-delete" style="color: red;">删除分组</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </li>
                        </template>
                    </ul>
                </div>
            </div>
            <div class="app-extension-wrap">
                <div class="app-extension-item">
                    <i class="el-icon-s-order"></i>
                    <span>工作流</span>
                </div>
                <div class="app-extension-item">
                    <i class="el-icon-user"></i>
                    <span>用户</span>
                </div>
            </div>
            <div class="common-user-handle-wrap">
                <el-tooltip class="item" effect="dark" content="搜索" placement="top">
                    <div class="app-header-search">
                        <i class="el-icon-search"></i>
                    </div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="我的流程" placement="top">
                    <div class="my-process-header">
                        <i class="el-icon-tickets"></i>
                    </div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="帮助" placement="top">
                    <div class="workflow-help-icon-wrap">
                        <i class="el-icon-question"></i>
                    </div>
                </el-tooltip>
            </div>
        </header>
        <div class="worksheet-sheet">
            <div class="work-sheet-left">
                <div class="flex" v-if="workSheetList.length > 0">
                    <div class="sheet-left-scrollbar">
                        <div class="sheet-left-content">
                            <ul class="menu-bar">
                                <template v-for="(item, key) in workSheetList">
                                <li :key="item.workSheetId" class="menu-item" :style="item.workSheetId === currentWorkSheet.workSheetId ? `background-color: rgba(255, 152, 0, 0.2);`: ``">
                                    <div class="left-wrapper" @click="handleSelectWorkSheet(key)">
                                        <div class="icon-wrap">
                                            <i class="el-icon-question"></i>
                                        </div>
                                        <span class="name">{{item.workSheetName}}</span>
                                    </div>
                                    <div class="right-wrapper">
                                        <el-dropdown trigger="click">
                                            <span class="el-dropdown-link">
                                                <i class="el-icon-more"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item icon="el-icon-edit">修改名称和图标</el-dropdown-item>
                                                <el-dropdown-item icon="el-icon-document-copy">复制</el-dropdown-item>
                                                <el-dropdown-item icon="el-icon-sort">移动到</el-dropdown-item>
                                                <el-dropdown-item icon="el-icon-delete" style="color: red;">删除工作表</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </li>
                                </template>
                            </ul>
                            <div class="create-work-sheet">
                                <el-dropdown trigger="click" @command="handleActionApp">
                                    <span class="el-dropdown-link">
                                        <i class="el-icon-plus"></i>
                                        <span class="text">应用项</span>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item icon="el-icon-document-add" command="newWorkSheet">工作表</el-dropdown-item>
                                        <el-dropdown-item icon="el-icon-document">自定义页面</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="loading-skeleton" v-if="workSheetList.length === 0">
                    <ul>
                        <li style="width:100%;"></li>
                        <li style="width:50%;"></li>
                        <li style="width:70%;"></li>
                        <li style="width:100%;"></li>
                        <li style="width:70%;"></li>
                    </ul>
                </div>
            </div>

            <div class="work-sheet-right" v-if="workSheetList.length > 0">
                <div class="sheet-header">
                    <div class="left-flex-wrap"> 
                        <span class="left-arrow">
                            <i class="el-icon-d-arrow-left"></i>
                        </span>
                        <span class="title">{{currentWorkSheet.workSheetName}}</span>
                        <el-dropdown trigger="click" @command="handleCommand">
                            <span class="el-dropdown-link">
                                <span class="right-arrow">
                                    <i class="el-icon-more"></i>
                                </span>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-s-tools" command="editFromDesign">编辑表单</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-edit" divided>修改名称和图标</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-warning-outline">编辑工作表说明</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-s-opportunity">设置记录名称</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-paperclip" divided>从 Excel 导入数据</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-delete-solid">回收站</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-delete" style="color: red;">删除工作表</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="right-wrap">
                        <div :class="`search-input-wrap ${searchInputClass}`"> 
                            <div class="input-con">
                                <el-tooltip class="item" effect="dark" content="搜索" placement="top">
                                    <i class="el-icon-search" @click="searchInput"></i>
                                </el-tooltip>
                                <input placeholder="搜索" type="text" value="">
                            </div>
                        </div>
                        <span class="worksheet-filter-btn">
                            <el-tooltip class="item" effect="dark" content="筛选" placement="top">
                                <i class="el-icon-s-operation"></i>
                            </el-tooltip>
                        </span>
                        <span class="statistics">
                            <el-tooltip class="item" effect="dark" content="统计" placement="top">
                            <i class="el-icon-s-data"></i>
                            </el-tooltip>
                        </span>
                        <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-plus"
                            @click="handleAdd">添加</el-button> 
                    </div>
                </div>
                <div class="sheet-tool">
                    <div class="valign-wrapper">
                        <el-tooltip class="item" effect="dark" content="添加视图" placement="top">
                            <div class="add-view-btn">
                                <i class="el-icon-plus"></i>
                            </div>
                        </el-tooltip>
                        <div class="work-sheet-views-wrapper">
                            <div class="views-scroll">
                                <div class="work-sheet-view-item active">
                                    <div class="name"><span>全部</span></div>
                                    <el-dropdown trigger="click" @command="handleCommand">
                                        <span class="el-dropdown-link">
                                            <i class="el-icon-caret-bottom"></i>
                                        </span>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item icon="el-icon-s-tools" command="editFromDesign">配置视图</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-guide">更改视图类型</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-document-copy">复制</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-share" divided>分享</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-download">导出</el-dropdown-item>
                                            <el-dropdown-item icon="el-icon-delete" style="color: red;">删除视图</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>
                        </div>
                        <el-tooltip class="item" effect="dark" content="刷新视图" placement="top">
                            <i class="el-icon-refresh reload" @click="getDynamicCollectionsList"></i>
                        </el-tooltip>
                        <pagination
                            small
                            layout="total, prev, next"
                            :background="false"
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            @pagination="getDynamicCollectionsList"
                        />
                    </div>
                </div>
                <div :class="`sheet-select ${sheetSelectActive}`">
                    <div class="selected">
                        <span class="selected-status">已选择本页 1 条添加订单</span>
                    </div>
                    <div class="btns">
                        <div class="icon-text">
                            <i class="el-icon-s-grid"></i>
                            <span class="text">打印二维码</span>
                        </div>
                        <div class="icon-text">
                            <i class="el-icon-download"></i>
                            <span class="text">导出为Excel</span>
                        </div>
                        <div class="icon-text">
                            <i class="el-icon-edit"></i>
                            <span class="text">编辑</span>
                        </div>
                        <div class="icon-text delete" @click="delAction">
                            <i class="el-icon-delete"></i>
                            <span class="text">删除</span>
                        </div>
                        <div class="icon-text custom-button-exec-con">
                            <span class="splitter"></span>
                            <span class="expand-btn">
                                <i class="el-icon-set-up"></i>
                                <span class="text">动作</span>
                                <i class="el-icon-arrow-down"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <template v-if="pageData">

                    <table class="header">
                        <tr>
                            <th style="text-align: center; width: 5%;">
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
                            </th>
                            <th v-for="(item, index) in pageData.column" :key="`tableColumn${index}`" :style="`width:${95/pageData.column.length}%`">{{item.label}}</th>
                        </tr>
                    </table>
                    <el-checkbox-group v-model="checkedItems" @change="handleCheckedChange">
                    <table class="body">
                        <template v-for="(listItem, listIndex) in list">
                            <tr :key="`list${listIndex}`">
                            <td style="text-align: center; width: 5%;">
                                <el-checkbox :label="listItem.uuid" :key="listItem.uuid" class="checkbox-label"></el-checkbox>
                            </td>
                            <template v-for="(item, index) in pageData.column">
                                <td :key="`listTableColumn${listIndex}-${index}`" :style="`width:${95/pageData.column.length}%`">
                                    <div class="edit-table-cell-con">
                                    
                                            <div class="txt" v-if="!listItem[`${item.prop}Edit`]">{{listItem.widgetModels[item.prop]}}</div>
                                            <div :class="`edit-${item.prop}`" v-if="listItem[`${item.prop}Edit`]">
                                                <el-input v-model="listItem.widgetModels[item.prop]" placeholder="请输入内容"></el-input>
                                            </div>
                                            <div class="edit-btn" v-show="!listItem[`${item.prop}Edit`]" @click.stop="handleEditItem(listIndex, item.prop)">
                                                <i class="el-icon-edit"></i>
                                            </div>
                                    
                                    </div>
                                </td>
                            </template>
                            </tr>
                        </template>
                    </table>
                    </el-checkbox-group>
                </template>
            </div>
            <div class="work-sheet-empty" v-if="workSheetList.length === 0">
                <div class="content-box"> 
                    <i></i>
                    <span class="txt">创建工作表，开始构建你的应用</span>
                    <div class="input-box">
                        <el-form :model="workSheetForm" :rules="workSheetRules" ref="workSheetForm" label-width="100px" class="work-sheet-form" labelWidth="120px">
                            <el-form-item label="工作表名称" prop="workSheetName">
                                <el-input v-model="workSheetForm.workSheetName" placeholder="例如：订单、客户"></el-input>
                            </el-form-item>
                        </el-form>
                        <div class="submit-sheet-form">
                            <el-button type="primary" @click="submitWorkSheetForm('workSheetForm')">创建工作表</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增 -->
        <el-drawer title="新增"
                    :visible.sync="addVisible"
                    size="60%"
                    append-to-body
                    :before-close="handleBeforeClose">
            <avue-form v-if="addVisible"
                    ref="form"
                    class="preview-form"
                    :option="pageData"
                    v-model="widgetModels"
                    @submit="handlePreviewSubmit"></avue-form>
            <div class="drawer-foot">
            <el-button size="medium"
                        type="primary"
                        @click="handlePreviewSubmit">确定</el-button>
            <el-button size="medium"
                        type="danger"
                        @click="handleBeforeClose">取消</el-button>
            </div>
        </el-drawer>
        <el-dialog
            title="新建工作表"
            :visible.sync="newWorkSheetDialogVisible"
            width="30%"
            :before-close="handleClose">
                <el-form :model="workSheetForm" :rules="workSheetRules" ref="newWorkSheetForm" label-width="100px" class="work-sheet-form" labelWidth="120px">
                    <el-form-item label="工作表名称" prop="workSheetName">
                        <el-input v-model="workSheetForm.workSheetName" placeholder="例如：订单、客户"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="newWorkSheetDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitWorkSheetForm('newWorkSheetForm')">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>
<script>
import randomString from "../utils/generatorUID"
import { workSheetSave, fetchWorkSheet } from "../api/workSheetApi";
import { workSheetGroupSave, fetchWorkSheetGroupList, workSheetGroupUpdate } from "../api/workSheetGroupApi";
import { dynamicCollectionsSave, fetchDynamicCollectionsList, dynamicCollectionsDel } from "../api/dynamicCollectionsApi";

export default {
    name: 'WorkSheet',
    data(){
        return {
            pageData: {},
            widgetModels: {},
            addVisible: false,
            list: [],
            searchInputClass: 'default',
            // 当前编辑的元素数组key
            currentEditFieldKey: '',
            // 当前编辑的元素的字段
            currentEditField: '',
            // 当前是否选择了工具栏
            sheetSelectActive: '',
            // 所有uuid集合
            allUuids: [],
            // 选中
            checkedItems: [],
            // 全选状态
            isIndeterminate: false,
            // 是否全选
            checkAll: false,
            // 新建工作表弹框
            newWorkSheetDialogVisible: false,
            workSheetForm: {
                appId: '',
                workSheetId: '',
                workSheetGroupUuid: '',
                workSheetName: '',
                collectionsName: '',
                widgetForm: {
                      column: [
                        {
                            type: 'input',
                            label: '单行文本',
                            span: 24,
                            display: true,
                            prop: '1618458787897_37938'
                        }
                    ],
                    labelPosition: 'left',
                    labelSuffix: '：',
                    labelWidth: 120,
                    gutter: 0,
                    menuBtn: true,
                    submitBtn: true,
                    submitText: '提交',
                    emptyBtn: true,
                    emptyText: '清空',
                    menuPosition: 'center'
                },
            },
            workSheetRules: {
                workSheetName: [
                    { required: true, message: '请输入工作表名称', trigger: 'blur' }
                ],
            },
            workSheetList: [],
            currentWorkSheet: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            // 总数
            total: 0,
            // 工作表分组
            workSheetGroupList: [],
            // 是否激活添加工作表分组提示
            workSheetGroupActive: false,
            workSheetGroupForm: {
                appId: '',
                workSheetGroupUuid: '',
                workSheetGroupName: '未命名分组',
                workSheetList:[]
            },
            currentWorkSheetGroup: {}
        }
    },
    created() {
        // this.pageData = this.$store.state.pageData.data
        console.log('this.pageData', this.pageData)
        const appId = this.$route.params.appId
        const history = localStorage.getItem("avue-form-history")
        if (history) {
          const historySteps = eval("(" + history + ")")
          console.log('this.historySteps', this.historySteps, 'appid', this.appid)
          if(historySteps[appId]){
            const { index, steps } = historySteps[appId]
            this.pageData = this.deepClone(steps[index])
          }
        }
        this.getWorkSheetList()
        this.getWorkSheetGroupList()
    },
    mounted () {
        document.addEventListener('click', this.handleBodyClick)
    },
    destroyed () {
        document.removeEventListener('click', this.handleBodyClick)
    },
    watch: {
        '$route.params.workSheetGroupUuid': {
            handler() {
                this.getWorkSheetList()
            },
            immediate: true,
        }
    },
    methods: {
        getWorkSheetGroupList(){
            fetchWorkSheetGroupList({appId: this.$route.params.appId}).then(response => {
                if(Number(response.code) === 200){
                    this.workSheetGroupList = response.data
                    if(this.workSheetGroupList.length > 0){
                        this.currentWorkSheetGroup = {isEdit: false, ...this.workSheetGroupList[0]}
                    }
                } 
            })
        },
        getWorkSheetList() {
            fetchWorkSheet({appId: this.$route.params.appId, workSheetGroupUuid: this.$route.params.workSheetGroupUuid}).then(response => {
                if(Number(response.code) === 200){
                    this.workSheetList = response.data
                    if(this.workSheetList.length > 0) {
                        this.pageData = this.workSheetList[0].widgetForm
                        this.currentWorkSheet = this.workSheetList[0]
                        this.getDynamicCollectionsList()
                    }
                }
            })
        },
        getDynamicCollectionsList() {
            fetchDynamicCollectionsList({collectionsName: this.currentWorkSheet.collectionsName, ...this.queryParams}).then(response => {
                console.log('response', response)
                let allUuids = []
                this.list = response.rows
                this.total = response.total
                this.list.length > 0 && this.list.forEach(o => {
                    allUuids.push(o.uuid)
                })
                this.allUuids = allUuids
            })
        },
        handleBodyClick(e){
            const t = document.querySelector(`.edit-${this.currentEditField}`)
            if(t && !t.contains(e.target)){
                this.resetList(this.currentEditFieldKey, this.currentEditField, false)
            }

            const workSheetGroupActive = document.querySelector(`.work-sheet-group-active`)
            if(workSheetGroupActive && !workSheetGroupActive.contains(e.target)){
                this.updateWorkSheetGroup()
            }
        },
        handleAdd() {
            this.addVisible = true
        },
        // 新增 - 弹窗 - 确定
        handlePreviewSubmit(form, done) {
            dynamicCollectionsSave({
                collectionsName: this.currentWorkSheet.collectionsName, 
                uuid: randomString(),
                widgetModels: this.widgetModels
                }).then(response => {
                    if(Number(response.code) === 200){
                        this.getDynamicCollectionsList()
                    }
            })
            if (done) {
                //this.list.push(this.widgetModels)
                done()
                this.addVisible = false
                // this.$alert(this.widgetModels).then(() => {
                //     done()
                // }).catch(() => {
                //     done()
                // })
            } else {
                this.$refs.form.validate((valid) => {
                    if(valid){
                        //this.list.push(this.widgetModels)
                        // done()
                        this.addVisible = false
                    }

                    // if (valid) this.$alert(this.widgetModels).then(() => {
                    //     done()
                    // }).catch(() => {
                    //     done()
                    // })
                })
            }
        },
        // 新增 - 弹窗 - 关闭前
        handleBeforeClose() {
            this.$refs.form.resetForm()
            this.widgetModels = {}
            this.addVisible = false
        },
        handleGoto() {
            //console.log('this.$route', this.$route.params.appid);
            this.$router.push( { name:'FromDesign', params: { appId: this.$route.params.appId, workSheetId: this.currentWorkSheet.workSheetId } } );
        },
        handleGotoHome() {
            //console.log('this.$route', this.$route.params.appid);
            this.$router.push( { name:'AppList', params: { } } );
        },
        handleCommand(command) {
            switch(command){
                case 'editFromDesign': 
                    this.$router.push( { name:'FromDesign', params: { appId: this.$route.params.appId, workSheetId: this.currentWorkSheet.workSheetId } } );
                break;
            }
        },
        searchInput() {
            this.searchInputClass = ''
        },
        handleEditItem(index, field) {
            if(this.currentEditFieldKey !== '' && this.currentEditField !== ''){
                this.resetList(this.currentEditFieldKey, this.currentEditField, false)
            }
            this.$nextTick(() => {
                this.currentEditFieldKey = index
                this.currentEditField = field
                this.resetList(index, field, true)
            })
        },
        resetList(currentEditFieldKey, currentEditField, flag){
            let list = this.list;
            const key = currentEditField + 'Edit';
            let o = list[currentEditFieldKey];
            o[key] = flag;
            this.$set(this.list, currentEditFieldKey, { ...o});
            if(flag === false){
                this.currentEditFieldKey = ''
                this.currentEditField = ''
            }
        },
        handleSelectWorkSheet(key){
            this.currentWorkSheet = this.workSheetList[key]
            this.pageData = this.currentWorkSheet.widgetForm
            this.getDynamicCollectionsList()
        },
        handleActionApp(command){
            switch(command){
                case 'newWorkSheet':
                    this.handleNewWorkSheet()
                    break;
            }
        },
        handleNewWorkSheet(){
            this.newWorkSheetDialogVisible = true
        },
        handleCheckedChange(v){
            let checkedCount = v.length
            this.checkAll = checkedCount === this.list.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length
            this.sheetSelectActive = checkedCount > 0 ? 'sheet-select-active' : ''
            console.log('this.checkAll', this.checkAll)
        },
        handleCheckAllChange(val) {
            this.checkedItems = val ? this.allUuids : []
            this.isIndeterminate = false
        },
        delAction(){
            dynamicCollectionsDel({collectionsName: this.currentWorkSheet.collectionsName, uuids: this.checkedItems}).then(response => {
                if(Number(response.code) === 200){
                    this.checkedItems = []
                    this.isIndeterminate = false
                    this.sheetSelectActive = ''
                    this.getDynamicCollectionsList()
                }
            })
        },
        submitWorkSheetForm(workSheetForm) {
            this.$refs[workSheetForm].validate((valid) => {
                if (valid) {
                    const appId = this.$route.params.appId
                    this.workSheetForm.appId = appId
                    const workSheetId = randomString()
                    this.workSheetForm.workSheetId = workSheetId
                    this.workSheetForm.collectionsName = `WorkSheet-${workSheetId}`
                    this.workSheetForm.workSheetGroupUuid = this.$route.params.workSheetGroupUuid
                    
                    workSheetSave(this.workSheetForm).then(response => {
                        if(Number(response.code) === 200){
                            this.$router.push( { name:'FromDesign', params: { appId, workSheetId } } );
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        handleWorkSheetGroupCommand(e) {
            switch(e) {
                case 'renameWorkSheetGroup':
                    this.renameWorkSheetGroup()
                    break;
                case 'addWorkSheetGroup':
                    this.addWorkSheetGroup()
                    break;
                default:
                    break;
            }
        },
        handleWorkSheetGroup() {
            this.workSheetGroupActive = true
        },
        renameWorkSheetGroup() {
            this.currentWorkSheetGroup.isEdit = true
        },
        updateWorkSheetGroup() {
            if(this.currentWorkSheetGroup.isEdit){
                this.currentWorkSheetGroup.isEdit = false
                workSheetGroupUpdate(this.currentWorkSheetGroup).then(response => {
                    if(Number(response.code) === 200){
                        this.getWorkSheetGroupList()
                    }
                })
            }
        },
        addWorkSheetGroup() {
            const appId = this.$route.params.appId
            this.workSheetGroupForm.appId = appId
            const workSheetGroupUuid = randomString()
            this.workSheetGroupForm.workSheetGroupUuid = workSheetGroupUuid
            this.workSheetGroupForm.workSheetList = this.workSheetList
            workSheetGroupSave(this.workSheetGroupForm).then(response => {
                if(Number(response.code) === 200){
                    this.workSheetGroupActive = false
                    this.getWorkSheetGroupList()
                    this.$router.push( { name:'WorkSheet', params: { appId: this.$route.params.appId, workSheetGroupUuid } } );
                }
            })
        },
        handleCurrentWorkSheetGroup(item) {
            if(item.workSheetGroupUuid !== this.currentWorkSheetGroup.workSheetGroupUuid){
                this.currentWorkSheetGroup = {isEdit: false, ...item}
                this.$router.push( { name:'WorkSheet', params: { appId: this.$route.params.appId, workSheetGroupUuid: this.currentWorkSheetGroup.workSheetGroupUuid } } );
            }
        }
    }
}
</script>
<style lang="scss">
.container{
    height: 100%;
    overflow: hidden;
    background-color: #f5f5f9;
    header{
        display: flex;
        height: 100%;
        align-items: center;
        height: 50px;
        justify-content: space-between;
        box-shadow: 0 1px 2px rgba(0,0,0,.24);
        background-color: rgb(237, 141, 0);
        position: relative;
        z-index: 2;
        .app-info-wrap{
            display: flex;
            height: 100%;
            align-items: center;
            box-sizing: border-box;
            min-width: 240px;
            max-width: 420px;
            padding-right: 12px;
            flex-shrink: 0;
            .home-page-icon-wrap{
                display: flex;
                height: 100%;
                align-items: center;
                padding: 0 10px 0 16px;
                cursor: pointer;
                i{
                    font-size: 18px;
                    color: #fff;
                }
            }
            .app-detail-wrap{
                position: relative;
                display: flex;
                height: 100%;
                align-items: center;
                .app-icon-and-name{
                    display: flex;
                    height: 100%;
                    align-items: center;
                    cursor: pointer;
                    color: #fff;
                    .app-icon-wrap{
                        width: 30px;
                        height: 30px;
                        border-radius: 4px;
                        flex-shrink: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .app-name{
                        margin: 0 2px;
                        font-size: 15px;
                        font-weight: 700;
                        max-width: 290px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .el-dropdown{
                        .el-dropdown-link{
                            i{
                                color: hsla(0,0%,100%,.6);
                                &:hover{
                                    color: hsla(0,0%,100%,1);
                                }
                            }
                        }
                    }
                }
            }
        }
        .empty-app-item-wrap{
            position: relative;
            flex: 1 1;
            .empty-app-item{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 60px;
                height: 50px;
                cursor: pointer;
                i{
                    color: #fff;
                    font-size: 20px;
                }
                &:hover{
                    background-color: rgba(0,0,0,.15);
                }
            }
            .app-group-intro{
                box-sizing: border-box;
                position: absolute;
                left: 0;
                top: 50px;
                width: 625px;
                padding: 20px 24px;
                background-color: #fff;
                z-index: 10;
                box-shadow: 0 4px 16px 1px rgba(0,0,0,.24), 0 0 1px 0 rgba(0,0,0,.12);
                transform: scale(0);
                transform-origin: left top;
                transition: -webkit-transform .25s;
                transition: transform .25s;
                transition: transform .25s,-webkit-transform .25s;
                .title{
                    font-size: 17px;
                    color: #333;
                    font-weight: 700;
                }
                .explain{
                    margin: 8px 0 10px;
                    color: #757575;
                }
                .intro-images{
                    img{
                        max-width: 100%;
                    }
                }
                .btn-wrap{
                    display: flex;
                    justify-content: flex-end;
                    margin-top: 10px;
                    cursor: pointer;
                }
            }
            &.active{
                .empty-app-item{
                    background-color: rgba(0,0,0,.15);
                }
                .app-group-intro{
                    transform: scale(1);
                }
            }
        }

        .app-items-outer-wrap{
            display: flex;
            height: 100%;
            align-items: center;
            flex: 1 1;
            position: relative;
            overflow: hidden;
            .app-items-inner-wrap{
                position: absolute;
                top: 0;
                left: 0;
                height: 70px;
                width: 100%;
                overflow-x: scroll;
                overflow-y: hidden;
                .app-items-wrap{
                    display: flex;
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 50px;
                    li{
                        display: flex;
                        height: 100%;
                        align-items: center;
                        position: relative;
                        box-sizing: border-box;
                        white-space: nowrap;
                        cursor: pointer;
                        color: #fff;
                        flex-shrink: 0;
                        font-weight: 700;
                        .sortable-item{
                            display: flex;
                            height: 100%;
                            align-items: center;
                            padding: 0 20px;
                            color: #fff;
                            padding: 0 30px 0 20px;
                            span{
                                display: inline-block;
                                box-sizing: border-box;
                                max-width: 170px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                        .icon{
                            position: absolute;
                            right: 12px;
                            top: 47%;
                            width: 0;
                            height: 0;
                            border: 5px solid transparent;
                            border-top-color: hsla(0,0%,100%,.6);
                            transition: all .25s;
                            display: none;
                        }
                        &:hover{
                            background-color: rgba(0,0,0,.08);
                            font-weight: 700;
                        }
                        &.work-sheet-group-active{
                            background-color: rgba(0,0,0,.15);
                            .icon{
                                display: block;
                            }
                        }
                    }
                }
            }
        }
        .app-extension-wrap{
            display: flex;
            height: 100%;
            align-items: center;
            flex-shrink: 0;
            margin-right: 18px;
            font-weight: 700;
            .app-extension-item{
                color: hsla(0,0%,100%,.8);
                padding: 12px;
                font-size: 14px;
                cursor: pointer;
                i{
                    font-size: 15px;
                    padding-right: 5px;
                }
            }
        }
        .common-user-handle-wrap{
            position: relative;
            flex-shrink: 0;
            padding: 0 20px;
            background: hsla(0,0%,100%,.1);
            display: flex;
            height: 100%;
            align-items: center;
            .app-header-search{
                position: relative;
                display: inline-block;
                cursor: pointer;
                i{
                    transition: all .25s;
                    color: hsla(0,0%,100%,.8);
                }
            }
            .my-process-header{
                position: relative;
                color: #fff;
                margin-left: 10px;
                cursor: pointer;
            }
            .workflow-help-icon-wrap{
                margin: 0 20px;
                position: relative;
                display: inline-block;
                cursor: pointer;
                i{
                    transition: all .25s;
                    color: hsla(0,0%,100%,.8);
                }
            }
        }
    }
    .worksheet-sheet{
        display: flex;
        height: 100%;
        .work-sheet-left{
            width: 240px;
            min-width: 0;
            position: relative;
            z-index: 10;
            flex-direction: column;
            background-color: #fff;
            transition: width .2s;
            border-right: 1px solid #e0e0e0;
            display: flex;
            .flex{
                flex: 1 1;
                .sheet-left-scrollbar{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    .sheet-left-content{
                        position: absolute;
                        overflow: scroll;
                        overflow-x: hidden;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        .menu-bar{
                            .menu-item{
                                color: inherit;
                                padding: 0 19px 0 21px;
                                height: 46px;
                                cursor: pointer;
                                align-items: center;
                                user-select: none;
                                display: flex;
                                .left-wrapper{
                                    display: flex;
                                    align-items: center;
                                    height: 100%;
                                    width: 90%;
                                    color: rgba(0,0,0,.87);
                                    .icon-wrap{
                                        min-width: 22px;
                                        i{
                                            color: #ed8d00;
                                        }
                                    }
                                    .name{
                                        display: inline-block;
                                        color: inherit;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        vertical-align: top;
                                        font-size: 14px;
                                        margin-left: 10px;
                                        margin-right: 10px;
                                    }
                                }
                                .right-wrapper{
                                    position: relative;
                                    width: 10%;
                                    height: 20px;
                                    display: none;
                                    i{
                                        color: rgba(0,0,0,.5);
                                    }
                                }
                                &:hover{
                                    background-color: rgba(0,0,0,.04);
                                    .right-wrapper{
                                        display: inline-block;
                                    }
                                }
                            }
                        }
                        .create-work-sheet{
                            padding: 12px;
                            display: flex;
                            align-items: center;
                            padding-left: 20px;
                            margin-left: 2px;
                            cursor: pointer;
                            i{
                                color: #9e9e9e;
                                font-size: 20px;
                                margin-right: 10px;
                            }
                            .text{
                                color: rgba(0,0,0,.3);
                                font-size: 14px;
                            }
                            &:hover{
                                background-color: rgba(0,0,0,.04);
                            }
                        }
                        &::-webkit-scrollbar{
                            width: 0;
                        }
                        &::-webkit-scrollbar-track{
                            background-color: transparent;
                        }
                    }
                }
            }
            .loading-skeleton{
                background-color: #fff;
                padding: 0 20px;
                ul{
                    display: flex;
                    flex-direction: column;
                    li{
                        width: 100%;
                        height: 18px;
                        border-radius: 16px;
                        margin: 13px 0;
                        animation: paragraphAnimation 2s ease infinite;
                        background: linear-gradient(90deg,hsla(0,0%,96.1%,.8) 25%,hsla(0,0%,96.1%,.4) 37%,hsla(0,0%,96.1%,.8) 63%);
                        background-size: 400% 100%;
                    }
                }
            }
        }
        .work-sheet-right{
            flex: 1 1;
            background-color: #fff;
            .sheet-header{
                display: flex;
                padding-left: 10px;
                padding-right: 20px;
                height: 38px;
                background-color: rgb(255, 255, 255);
                -webkit-box-align: center;
                align-items: center;
                .left-flex-wrap{
                    -webkit-flex: 1;
                    flex: 1 1;
                    -ms-flex: 1;
                    .left-arrow{
                        cursor: pointer;
                        i{
                            vertical-align: middle;
                            margin: 0 8px 0 0;
                            color: #999;
                            font-size: 18px;
                        }
                    }
                    .title{
                        vertical-align: middle;
                        font-size: 14px;
                        color: #666;
                        display: inline-block;
                        max-width: 17em;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        vertical-align: top;
                        font-size: 17px;
                        color: #333;
                        font-weight: 700;
                    }
                    .right-arrow{
                        position: relative;
                        top: 3px;
                        margin-left: 6px;
                        cursor: pointer;
                        i{
                            font-size: 20px;
                            color: #9d9d9d;
                        }
                    }
                }
                .right-wrap{
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center;
                    .search-input-wrap{
                        margin-right: 4px;
                        margin-top: 5px;
                        display: inline-block;
                        border-radius: 24px;
                        background-color: #eaeaea;
                        font-size: 13px;
                        vertical-align: middle;
                        .input-con{
                            display: flex;
                            padding: 3px 6px;
                            position: relative;
                        }
                        input{
                            width: 180px;
                            border: none;
                            padding: 0;
                            color: #666;
                            text-indent: 5px;
                            background-color: transparent;
                        }
                        &.default{
                            border: none;
                            background-color: #fff;
                            input{
                                width: 0;
                            }
                        }
                    }
                    .worksheet-filter-btn{
                        cursor: pointer;
                        vertical-align: middle;
                        font-size: 13px;
                        margin-right: 16px;
                        border-radius: 4px;
                        line-height: 29px;
                        &:not(.active){
                            background-color: #fff;
                            padding-left: 0;
                            color: #9d9d9d;
                        }
                    }
                    .statistics{
                        margin-right: 16px;
                        margin-top: 4px;
                        i{
                            color: #9e9e9e;
                        }
                    }
                }
            }
            .sheet-tool{
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                flex-direction: revert;
                flex-shrink: 0;
                height: 37px;
                padding: 0px 20px 0px 14px;
                overflow: hidden;
                .valign-wrapper{
                    display: flex;
                    align-items: center;
                    -webkit-flex: 1;
                    flex: 1 1;
                    -ms-flex: 1;
                    .add-view-btn{
                        cursor: pointer;
                        padding: 0 10px;
                        padding-right: 20px;
                    }
                    .work-sheet-views-wrapper{
                        width: 100%;
                        height: 37px;
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        flex: 1 1;
                        .views-scroll{
                            display: flex;
                            position: absolute;
                            width: 100%;
                            top: 0;
                            left: 0;
                            overflow-x: auto;
                            overflow-y: hidden;
                            .work-sheet-view-item{
                                height: 37px;
                                justify-content: center;
                                position: relative;
                                max-width: 200px;
                                flex-shrink: 0;
                                -webkit-user-select: none;
                                -moz-user-select: none;
                                -ms-user-select: none;
                                user-select: none;
                                display: flex;
                                align-items: center;
                                .name{
                                    white-space: nowrap;
                                    padding: 0 20px;
                                    font-weight: 500;
                                    overflow: hidden;
                                    zoom: 1;
                                    height: 100%;
                                    display: flex;
                                    align-items: center;
                                    font-size: 13px;
                                    span{
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        vertical-align: top;
                                        font-weight: 700;
                                    }
                                }
                                i{
                                    padding: 0 8px;
                                    display: none;
                                    font-size: 12px;
                                    color: #bdbdbd;
                                    cursor: pointer;
                                }
                                &.active{
                                    .name{
                                        color: #2196f3;
                                        padding-right: 0;
                                    }
                                    i{
                                        display: block;
                                    }
                                    &:after {
                                        content: "";
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        width: 100%;
                                        height: 3px;
                                        background-color: #2196f3;
                                    }
                                }
                            }
                        }
                    }
                    .reload{
                        cursor: pointer;
                    }
                }
            }
            .sheet-select{
                display: flex;
                flex-direction: column;
                position: fixed;
                z-index: 1;
                padding: 0 10px;
                top: -20px;
                width: 100%;
                height: 75px;
                line-height: normal;
                box-sizing: border-box;
                background-color: #fff;
                transition: top .2s ease-in;
                .selected{
                    flex: 2 1;
                    display: flex;
                    align-items: center;
                    .selected-status{
                        margin-left: 12px;
                        font-size: 17px;
                        color: #333;
                    }
                }
                .btns{
                    flex: 1 1;
                    padding-bottom: 5px;
                    .icon-text{
                        display: inline-block;
                        margin: 0 5px;
                        cursor: pointer;
                        color: #999;
                        i{
                            margin: 0 6px;
                            font-size: 18px;
                            vertical-align: middle;
                        }
                        .text{
                            vertical-align: middle;
                            font-size: 13px;
                        }
                        &.delete{
                            i{
                                color: #ff6d6c;
                            }
                            .text{
                                color: #ff6d6c;
                            }
                        }
                        &.custom-button-exec-con{
                            position: relative;
                            .splitter{
                                display: inline-block;
                                border: 1px solid #ccc;
                                height: 12px;
                                vertical-align: middle;
                                margin: 0 14px 0 12px;
                            }
                            .expand-btn{
                                cursor: pointer;
                                &:hover{
                                    color: #1e88e5;
                                }
                            }
                        }
                    }
                }
                &.sheet-select-active{
                    top: 50px;
                }
            }
            table{
                width: 100%;
                border-collapse: collapse;
                border-spacing: 0;
                border-top: 1px solid #ebeef5;
                border-left: 1px solid #ebeef5;
                tr{
                    th{
                        font-weight: 700;
                        font-size: 13px;
                        color: #757575;
                        line-height: 34px;
                        background-color: #fafafa!important;
                        border-bottom: 1px solid #ebeef5;
                        border-right: 1px solid #ebeef5;
                        text-align: left;
                        padding-left: 10px;
                        padding-right: 10px;
                    }
                    td{
                        border-bottom: 1px solid #ebeef5;
                        border-right: 1px solid #ebeef5;
                        font-size: 14px;
                        line-height: 34px;
                        .edit-table-cell-con{
                            position: relative;
                            .txt{
                                padding-left: 10px;
                                padding-right: 10px;
                            }
                            .el-input{
                                .el-input__inner{
                                    height: 34px;
                                    line-height: 34px;
                                }
                            }
                            .edit-btn{
                                position: absolute;
                                top: 0;
                                right: 10px;
                                display: none;
                                &:hover{
                                    color:#2196f3;
                                    i{
                                        cursor: pointer;
                                    }
                                }
                            }
                            &:hover{
                                .edit-btn{
                                    display: block;
                                }
                            }
                        }
                        .checkbox-label{
                            .el-checkbox__label{
                                display: none;
                            }
                        }
                    }
                    &:hover{
                        background-color: #f5f7fa;
                    }
                }
                &.body{
                    border-top: none;
                }
            }
        }
        .work-sheet-empty{
            margin: 16px 20px;
            border-radius: 4px;
            background-color: #fff;
            position: relative;
            flex: 1 1;
            margin-bottom: 66px;
            .content-box{
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
                flex-direction: column;
                i{
                    height: 160px;
                    display: inline-block;
                    background-size: contain;
                    background-repeat: no-repeat;
                    margin-bottom: 36px;
                    width: 440px;
                    background-position: 50%;
                    background-image: url();
                }
                .txt{
                    font-size: 20px;
                    color: #000;
                    text-align: center;
                    display: block;
                }
                .input-box{
                    margin-top: 40px;
                    .work-sheet-form{
                        .el-form-item{
                            .el-form-item__label{
                                font-size: 15px;
                                color: #333;
                                text-align: left;
                            }
                            .el-form-item__content{
                                .el-input{
                                    width: 320px;
                                }
                            }
                        }
                    }
                    .submit-sheet-form{
                        margin-top: 40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }
}
</style>


